<template>
  <div class="main">
        <p class="main_text">收车结算明细</p>
      <!-- 搜索 -->
      <div class=" top p20 mb20">
        <el-form :model="searchValue" ref="collectionRef" inline>
          <el-form-item label="操作时间" prop="startAt">
            <FormDate v-model:startTime="searchValue.startAt" v-model:endTime="searchValue.endAt" v-model:radio="radio">
              <span style="margin:0 10px">至</span>
            </FormDate>
          </el-form-item>
          <el-form-item label="订单号" prop="orderSn">
            <el-input v-model="searchValue.orderSn" style="width: 200px" />
          </el-form-item>
          <el-form-item label="车牌号码" prop="carNum">
            <el-input v-model="searchValue.carNum" style="width: 200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" plain @click="handleReset(collectionRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    <!-- ############################################## 数据表格 ############################################## -->
    <div class="cyr-flex">
        <el-button type="primary" v-if="roleList.write" @click="handleExportExcel" style="width: fit-content">导出明细</el-button>
      <el-table :data="tableData" class="mt20" :show-overflow-tooltip="true"
        v-adaptive border>
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="订单号" prop="orderSn"></el-table-column>
        <el-table-column label="车牌号" prop="carNum"></el-table-column>
        <el-table-column label="整备质量" prop="carWeight"></el-table-column>
        <el-table-column label="残值款" prop="amount"></el-table-column>
        <el-table-column label="易宝手续费(元)" prop="fee"></el-table-column>
<!--        <el-table-column label="平台服务费(元)">-->
<!--          <template #default="props">-->
<!--            {{ props.row.collectionFeeDetail != null ? props.row.collectionFeeDetail.serviceFee : 0 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="拖车费(元)">-->
<!--          <template #default="props">-->
<!--            {{ props.row.collectionFeeDetail != null ? props.row.collectionFeeDetail.residualFee : 0 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="平台总服务费（含拖运费）" width="200">
                   <template #default="props">
                   {{props.row.collectionFeeDetail != null ?props.row.collectionFeeDetail.serviceFee+props.row.collectionFeeDetail.residualFee:0  }}
              </template>
           </el-table-column>
                  <el-table-column label="总价" prop="totalPrice"></el-table-column>
                  <el-table-column label="创建时间" prop="finishTime"></el-table-column>
                </el-table>
                <!-- ############################################## 分页 ############################################## -->
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        @change="handleCurrentChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import useAuthorize from "@/hooks/authorize";
import {
  RequestCollectionFeeDetail, RequestCollectionExport
} from "@/api/path/index.js";
import { exportFile } from "@/utils/exportFile.js";
import { formatTimeHan } from "@/utils/index";
import moment from "moment";
import { ElMessage, FormInstance } from 'element-plus';
import FormDate from '@/components/CyrForm/FormDate.vue';
let roleList = useAuthorize();
const collectionRef = ref<FormInstance>()
const radio = ref(""); //单选按钮
const currentPage = ref(1)
const pageSize = ref(10)
const tableData = ref<any[]>([])
const total = ref(0)
const searchValue = ref({
  startAt: "",
  endAt: "",
  page: 1,
  rows: 10,
  carNum: "",
  orderSn: ''
});
/**
 * 点击重置
 */
const handleReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  searchValue.value.endAt = '';
  radio.value = "";
  searchValue.value.page = 1
  //请求数据
  initData(searchValue.value)
};
/**
 * 搜索点击事件
 */
const handleSearch = () => {
  //时间是否存在
  if (searchValue.value.startAt !== "" && searchValue.value.endAt !== "") {
    if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) >= 0) {
      ElMessage.error("开始时间不能晚于结束时间");
    } else {
      searchValue.value.startAt = moment(searchValue.value.startAt).format("YYYY-MM-DD HH:mm:ss");
      searchValue.value.endAt = moment(searchValue.value.endAt).format("YYYY-MM-DD HH:mm:ss");
      currentPage.value = 1;
      //请求数据
      initData(searchValue.value)
    }
  } else {
    currentPage.value = 1;
    //请求数据
    initData(searchValue.value)
  }
};

const handleExportExcel = () => {
  RequestCollectionExport({
    page: 1,
    rows: 100000,
    startAt:searchValue.value.startAt?moment(searchValue.value.startAt).format("YYYY-MM-DD HH:mm:ss"):'',
    endAt:searchValue.value.endAt?moment(searchValue.value.endAt).format("YYYY-MM-DD HH:mm:ss"):'',
    orderSn:searchValue.value.orderSn,
    carNum:searchValue.value.carNum
  }).then((res: any) => {
    if (res.type === 'application/json') {
      ElMessage.error('暂无数据导出')
    } else {
      exportFile(res, `${formatTimeHan(new Date())}收车结算明细`);
    }
  });
}
function handleCurrentChange(val: number) {
  // searchValue.value.page = val;
  initData(searchValue.value)
}
function initData(search: any) {
  console.log(search);
  searchValue.value.rows = pageSize.value
  searchValue.value.page = currentPage.value
  RequestCollectionFeeDetail(search).then((res: any) => {
    tableData.value = res.resultObj.list
    total.value = res.resultObj.count
  })
}
initData(searchValue.value)
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    background-color: #FFFFFF;
  }
}
</style>
